<template>
	<view class="member_List">
		<!--左边虚化-->
		<!-- <view class="hide-content-box hide-content-box-left"></view> -->
		<!--右边虚化-->
		<!-- <view class="hide-content-box hide-content-box-right"></view> -->
		<scroll-view scroll-x="true" class="kite-classify-scroll">
			<view class="kite-classify-cell" v-for="(item,index) in memberList" :key="index" :style="{backgroundImage:`url(${item.is_activity == 1 ? 
    $IMG_URL('/static/price/ATIA.png') : 
    $IMG_URL('/static/price/EVT.png')})`}">
				<view class="flex-container">
					<view class="drop-box" v-if="item.is_activity == 1">
						<image src="/static/stock/drop.png" mode="" class="drop-image"></image>
						<text>{{item.explain}}</text>
					</view>
					<view class="present">
						{{item.days + '天'}}
					</view>
					<view class="title">
						{{item.title}}
					</view>
					<view class="price">
						<text class="unit">￥</text>
						<text class="number">{{item.price}}</text>
					</view>
				</view>
				<view class="Countdown" v-if="item.hint != ''">
					{{item.hint}}
				</view>
				<view class="button" @click="routePurchase(item, index)" :style="{backgroundColor:item.is_activity == 1?'#D774FA':'#73F0EA'}">
					立即抢购
					<u-icon name="play-right-fill" color="#000000" size="16"></u-icon>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			memberList:{
				type:Array,
				default:[],
				required:true	
			},
			is_share:{
				type:Number,
				default:0,
				required:true	
			}
		},
		data() {
			return {
				// memberList:[
				// 	{
				// 		days:'90',
				// 		title:'体验卡',
				// 		price:'888',
				// 		cost:'1999',
				// 		drop:1
				// 	}
				// ]
			}
		},
		methods: {
			routePurchase(item, index){
				uni.navigateTo({
					url:'/pageA/member/purchase?par=' + item.par +'&is_share=' + this.is_share
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Countdown{
		z-index: 99;
		left: 14rpx;
		bottom: 50rpx;
		position: absolute;
		width: 172rpx;
		height: 26rpx;
		background: #73F0EA;
		border-radius: 4rpx;
		font-size: 16rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #000000;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.member_List {
		position: relative;
		white-space: nowrap;
		width: 654rpx;
	}

	/*左右渐变遮罩*/
	.hide-content-box {
		position: absolute;
		top: 0;
		height: 100%;
		width: 10px;
		z-index: 2;
	}

	.hide-content-box-left {
		left: 0;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 0),  #ffffff 60%);
	}

	.hide-content-box-right {
		right: 0;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0),  #ffffff 60%);
	}
	.kite-classify-scroll {
		width: 100%;
		height: 240rpx;
		overflow: hidden;
		white-space: nowrap;
	}
	.kite-classify-cell{
		display: inline-block;
		width: 200rpx;
		height: 240rpx;
		background: #ffffff;
		border-radius: 16rpx;
		position: relative;
		margin-right: 28rpx;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 99;
		.drop-box{
			position: absolute;
			left: 8rpx;
			top: 8rpx;
			height: 28rpx;
			background: rgba(215, 116, 250, 0.1);
			border-radius: 4rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #d774fa;
			padding:0 6rpx;
			.drop-image{
				width: 12rpx;
				height: 16rpx;
				margin-right: 2rpx;
			}
		}
		.present{
			position: absolute;
			right: 0;
			top: 0;
			padding: 0 8rpx;
			min-width: 70rpx;
			height: 34rpx;
			background: #000000;
			border-radius: 0rpx 16rpx 0rpx 16rpx;
			font-size: 24rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}
		.flex-container{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			margin-bottom: 72rpx;
		}
		.title{
			margin-top: 52rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #666666;
		}
		.price{
			display: flex;
			flex-direction: row;
			align-items: baseline;
			.unit{
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #3b2315;
			}
			.number{
				font-size: 48rpx;
				font-weight: 700;
				color: #3b2315;
			}
		}
		.strikethrough{
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-decoration:  line-through;
			text-align: center;
			color: #999999;
		}
		
		.button{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 200rpx;
			height: 60rpx;
			background: #73F0EA;
			border-radius: 16rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #000000;
			.logo{
				width: 10rpx;
				height: 16rpx;
				margin-left: 7rpx;
			}
		}
	}
</style>